<template>
	<view>
		<view>
			<u-cell-group :customStyle="{backgroundColor: 'white', borderRadius: '10px'}" :border="false">
				<u-cell isLink title="头像" @click="changeAvatar">
					<block slot="value">
						<u-avatar :src="vuex_user.profile.avatarUrl"></u-avatar>
					</block>
				</u-cell>
				<u-cell isLink title="昵称" :value="vuex_user.profile.name" @click="popupOpen('name')"></u-cell>
				<u-cell isLink title="邮箱" :value="vuex_user.profile.email||'未设置'" @click="popupOpen('email')"></u-cell>
				<u-cell isLink title="手机号" :value="vuex_user.profile.phone" @click="popupOpen('phone')"></u-cell>
				<u-cell isLink title="真实姓名" :value="vuex_user.profile.fullName" @click="popupOpen('fullName')"></u-cell>
				<u-cell isLink title="身份证号" :label="vuex_user.profile.idCard" @click="popupOpen('idCard')"></u-cell>
				<u-cell isLink title="签名" :label="vuex_user.profile.bio" @click="popupOpen('bio')"></u-cell>
			</u-cell-group>
			<u-popup :show="popupShow" :closeable="true" mode="center" @close="popupShow=false" round="15"
				:customStyle="{width:'80%',height:'auto'}" :safeAreaInsetBottom="false">
				<view class="p-30">
					<view class="popup-title">修改{{formTitle}}</view>
					<view class="popup-input">
						<textarea v-if="formField==='bio'" v-model="formValue"/>
						<input v-else v-model="formValue" />
					</view>
					<u-button type="success" :customStyle="{marginTop:'15px'}" text="保存" @click="submit"></u-button>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	import {
		updateProfile,uploadFile
	} from '@/config/api.js'
	export default {
		data() {
			return {
				formField: '',
				formTitle: '',
				formValue: '',
				popupShow: false,
				rules: {
					email: {
						type: 'email',
						required: true,
						message: '请输入正确的邮箱地址',
						trigger: ['blur']
					},
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur']
					}]
				}
			};
		},
		onLoad() {},
		methods: {
			popupOpen(type) {
				this.formField = type;
				if (type == 'name') {
					this.formTitle = '昵称';
				} else if (type == 'email') {
					this.formTitle = '邮箱';
				}else if (type == 'phone') {
					this.formTitle = '手机号';
				}else if (type == 'fullName') {
					this.formTitle = '真实姓名';
				}else if (type == 'idCard') {
					this.formTitle = '身份证号';
				}else if (type == 'bio') {
					this.formTitle = '签名';
				}
				this.formValue = this.vuex_user['profile'][type];
				this.popupShow = true;
			},
			changeAvatar() {
				this.$utils.TaChooseImage().then((img) => {
					uni.showLoading({
						title: '上传中...'
					});
					console.log(img);
					uploadFile({filePath:img,name: 'file',}).then(res1=>{
						updateProfile({
							avatarUrl: res1.url
						}).then(res1 => {
							this.$u.vuex('vuex_user', res1);
							uni.hideLoading();
						})
					})
				}).catch((ret) => {
					uni.showToast({
						title: ret || '操作失败',
						icon:'none'
					})
				})
			},
			submit() {
				if(!this.formValue){
					uni.showToast({
						title: '请输入需修改的内容！',
						icon:'none'
					})
					return false;
				}
				uni.showLoading({
						title: '保存中...'
					});
				updateProfile({
						[this.formField]: this.formValue
					}).then(res1 => {
						this.$u.vuex('vuex_user', res1);
						uni.hideLoading();
						this.popupShow = false;
					})
			}
		},
		onReady() {}
	};
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.popup-title {
		font-size: 17px;
		font-weight: 500;
		text-align: center;
		padding-bottom: 10px;
	}

	.popup-input {
		padding: 20rpx 30rpx;
		border-radius: 10rpx;
			border: 1rpx solid #eee;
		input,textarea {
			
			width:100%;
			color:#666;font-size:14px;
		}
	}
</style>